<template>
	<div class="k-line-chart-container">
		<h3 class="k-line-chart-title">{{title}}</h3>
		<view id="update-k-line" class="k-line-chart" />
	</div>

	</Layout>
</template>

<script>
	import {
		dispose,
		init
	} from 'klinecharts'
	import generatedKLineDataList from '@/common/generatedKLineDataList.js'
	import Event from '@/kline/datafeeds/event.js'
	// import Layout from "@/Layout"
	const textColorDark = '#929AA5'
	const gridColorDark = '#292929'
	const axisLineColorDark = '#333333'
	const crossTextBackgroundColorDark = '#373a40'

	const textColorLight = '#76808F'
	const gridColorLight = '#ededed'
	const axisLineColorLight = '#DDDDDD'
	const crossTextBackgroundColorLight = '#686d76'

	function getThemeOptions(theme) {
		const textColor = theme === 'dark' ? textColorDark : textColorLight
		const gridColor = theme === 'dark' ? gridColorDark : gridColorLight
		const axisLineColor = theme === 'dark' ? axisLineColorDark : axisLineColorLight
		const crossLineColor = theme === 'dark' ? axisLineColorDark : axisLineColorLight
		const crossTextBackgroundColor = theme === 'dark' ? crossTextBackgroundColorDark : crossTextBackgroundColorLight
		return {
			grid: {
				horizontal: {
					color: gridColor
				},
				vertical: {
					color: gridColor
				}
			},
			candle: {
				priceMark: {
					high: {
						color: textColor
					},
					low: {
						color: textColor
					}
				},
				tooltip: {
					text: {
						color: textColor
					}
				}
			},
			technicalIndicator: {
				tooltip: {
					text: {
						color: textColor
					}
				}
			},
			xAxis: {
				axisLine: {
					color: axisLineColor
				},
				tickLine: {
					color: axisLineColor
				},
				tickText: {
					color: textColor
				}
			},
			yAxis: {
				axisLine: {
					color: axisLineColor
				},
				tickLine: {
					color: axisLineColor
				},
				tickText: {
					color: textColor
				}
			},
			separator: {
				color: axisLineColor
			},
			crosshair: {
				horizontal: {
					line: {
						color: crossLineColor
					},
					text: {
						backgroundColor: crossTextBackgroundColor
					}
				},
				vertical: {
					line: {
						color: crossLineColor
					},
					text: {
						backgroundColor: crossTextBackgroundColor
					}
				}
			}
		}
	}


	export default {
		name: 'UpdateKLineChart',
		mounted: function() {
			this.kLineChart = init('update-k-line')
			this.setTheme('dark')
			// 创建一个主图技术指标
			// this.kLineChart.createTechnicalIndicator('MA', false, {
			// 	id: 'candle_pane'
			// })
			// 创建一个副图技术指标VOL
			// this.kLineChart.createTechnicalIndicator('VOL')
			// 创建一个副图技术指标MACD
			this.kLineChart.createTechnicalIndicator('MACD')
			this.kLineChart.setPriceVolumePrecision(4, 2)
			this.kLineChart.setStyleOptions({

				candle: {
					tooltip: {
						// 'always' | 'follow_cross' | 'none'
						showRule: 'none',
						// 'standard' | 'rect'
						showType: 'standard',
						labels: ['时间', '开', '收', '高', '低', '涨跌幅：'],
						values: kLineData => {
							// console.log(kLineData)
							const change = (kLineData.close - kLineData.open) / kLineData.open * 100
							return [

								{
									value: new Date(kLineData.timestamp).Format('h:m')
								},
								{
									value: kLineData.open.toFixed(2)
								},
								{
									value: kLineData.close.toFixed(2)
								},
								{
									value: kLineData.high.toFixed(2)
								},
								{
									value: kLineData.low.toFixed(2)
								},
								{
									value: `${change.toFixed(2)}%`,
									color: change < 0 ? '#EF5350' : '#26A69A'
								}
							]
						},
						rect: {
							paddingLeft: 0,
							paddingRight: 0,
							paddingTop: 0,
							paddingBottom: 6,
							offsetLeft: 8,
							offsetTop: 8,
							offsetRight: 8,
							borderRadius: 4,
							borderSize: 1,
							borderColor: '#3f4254',
							backgroundColor: 'rgba(17, 17, 17, .3)'
						},
					}
				}
			})
			// const updateData = () => {
			// 	setTimeout(() => {
			// 		const dataList = this.kLineChart.getDataList()
			// 		const lastData = dataList[dataList.length - 1]
			// 		const newData = generatedKLineDataList(lastData.timestamp, lastData.close,
			// 			1)[
			// 			0]
			// 		newData.timestamp += 60 * 1000
			// 		this.kLineChart.updateData(newData)
			// 		updateData(this.kLineChart)
			// 	}, 1000)

			// }
			// this.kLineChart.applyNewData(generatedKLineDataList());
			// updateData()
		},
		data: function() {
			return {
				theme: 'light',
				symbol: 'btcusdt'
			}
		},
		methods: {
			timer() {},
			setTheme: function(theme) {
				this.theme = theme
				this.kLineChart.setStyleOptions(getThemeOptions(theme))
			},
			kdata(symbol, resolution) {
				let periodarr = {
					'1': '1min',
					'5': '5min',
					'30': '30min',
					'60': '60min',
					'240': '4hour',
					'1D': '1day',
				}
				uni.request({
					// url: config.host + '/HH/market/history/kline',
					url: this.$host + '/addons/xshop/btc/common',
					data: {
						period: periodarr[resolution],
						size: 300,
						symbol: symbol //btcusdt
					},
					success: (re) => {
						console.log(re)
						const dataList = []
						var kd = re.data.data.reverse()
						kd.forEach(item => {
							dataList.push({
								open: item.open,
								low: item.low,
								high: item.high,
								close: item.close,
								volume: item.vol,
								timestamp: (item.id- 3600*12 )* 1000
							})
						})
						
						clearInterval(this.timer)
						this.kLineChart.applyNewData(dataList);
						// Event.emit('data', re.data.data.reverse()) //历史数据
						setTimeout(() => {
							var last = re.data.data.pop()
							console.log('last', last)
							Event.emit('realTime', last)
							this.timer = setInterval(() => {
								uni.request({
									url: this.$host + 'addons/xshop/btc/binfo',
									data: {},
									success: (re) => {
										console.log(re)
										// let bname = symbolInfo.name.substring(0, 3)
										let market = uni.getStorageSync('market');
										console.log(market)
										let bname = market.name
										// console.log('价格')
										// console.log(re.data.data[bname].price)

										last.close = parseFloat(re.data.data[bname]
											.price)
										let newData = {
											open: last.open,
											low: last.low,
											high: last.high,
											close: re.data.data[bname].price,
											volume: last.volume,
											timestamp: (last.id- 3600*12 )* 1000   
										}
										console.log('updateData', newData)
										console.log('timer',this.timer)
										this.kLineChart.updateData(newData)
										Event.emit('realTime', last) //实时数据 
									}
								});
							}, 2000)
						}, 100)

					}
				});
			}
		},
		destroyed: function() {
			dispose('update-k-line')
		}
	}
</script>
<style>
	body {
		margin: 0;
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background-color: #F2F3F5;
	}

	div,
	p {
		box-sizing: border-box;
	}

	p {
		margin: 0;
	}

	.app {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		padding: 15px;
	}

	.k-line-chart-container {
		display: flex;
		flex-direction: column;
		/* margin: 15px; */
		/* border-radius: 2px; */
		/* box-shadow: 0 2px 4px rgb(0 0 0 / 30%); */
		/* background-color: #191179; */
		width: 100%;
		height: 340px;
		/* padding: 16px 6px 16px 16px; */
	}

	.k-line-chart-title {
		margin: 0;
		color: #252525;
		padding-bottom: 10px;
	}

	.k-line-chart {
		display: flex;
		flex: 1;
	}

	.k-line-chart-menu-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		font-size: 12px;
		color: #606060;
	}

	.k-line-chart-menu-container button {
		cursor: pointer;
		background-color: #2196F3;
		border-radius: 2px;
		margin-right: 8px;
		height: 24px;
		line-height: 26px;
		padding: 0 6px;
		font-size: 12px;
		color: #fff;
		border: none;
		outline: none;
	}
</style>
